<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-用户中心</title>
	<link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}" href="../static/css/reset.css">
	<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" href="../static/css/main.css">
	<style type="text/css">
		.empty-address {
			text-align: center;
			padding: 40px 0;
			color: #666;
		}

		.empty-address .empty-icon {
			font-size: 48px;
			margin-bottom: 15px;
		}

		.empty-address p {
			font-size: 16px;
			margin: 10px 0;
		}

		.empty-address .hint {
			font-size: 14px;
			color: #999;
		}

	</style>
</head>
<body>

<div class="header_con" th:include="inner::header"></div>


	<div class="search_bar clearfix">
		<a href="index.html" class="logo fl" th:href="@{/index}"><img src="images/logo.png"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>
		<div class="search_con fr">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>
	</div>

	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="user-info.html" th:href="@{/profile}">· 个人信息</a></li>
				<li><a href="user-order.html" th:href="@{/order}">· 全部订单</a></li>
				<li><a href="user-addr.html" class="active" th:href="@{/addr}">· 收货地址</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">
				<h3 class="common_title2">收货地址</h3>
			<th:block th:if="${address.isEmpty()}">
				<div class="empty-address">
					<div class="empty-icon">📍</div>
					<p>暂无收货地址</p>
					<p class="hint">请添加一个收货地址以便下单</p>
				</div>
			</th:block>			<th:block th:each="addr,row : ${address}">
				<div class="site_con">
					<dl>
						<dd>
							<input type="radio" name="defaultAddr" th:checked="${row.index == 0}" checked/>
							<span th:text="${addr.province}">北京市</span>
							<span th:text="${addr.city}">海淀区</span>
							<span th:text="${addr.address}">东北旺西路8号中关村软件园</span>
							（<span th:text="${addr.name}">李思</span> 收）
							<span th:text="${addr.phone}">182****7528</span>
							<a href="#" style="padding-left: 5px" th:onclick="'editAddr('+${addr.id}+')'">编辑</a>
							<span>|</span>
							<a href="#" onclick="return confirm('您确定要删除吗？')" th:href="@{/addr/delete/{id}(id=${addr.id})}">删除</a>
						</dd>
					</dl>
				</div>
			</th:block>

				<h3 class="common_title2">编辑地址</h3>
				<div class="site_con">
					<form>
						<div class="form_group">
							<label>收件人：</label>
							<input type="text" name="name" placeholder="请输入收件人姓名">
						</div>
						<div class="form_group">
							<label>省份：</label>
							<input type="text" name="province" placeholder="请输入省份"/>
						</div>
						<div class="form_group">
							<label>城市：</label>
							<input type="text" name="city" placeholder="请输入城市"/>
						</div>
						<div class="form_group form_group2">
							<label>详细地址：</label>
							<textarea class="site_area" name="address" placeholder="请输入详细地址"></textarea>
						</div>
						<div class="form_group">
							<label>电话号码：</label>
							<input type="text" name="phone" placeholder="请输入电话号码">
						</div>

						<input type="hidden" name="id" />
						<input type="button" id="addr-btn" name="" value="保存" class="info_submit">
					</form>
				</div>
		</div>
	</div>



<div th:include="inner::footer" class="footer"></div>


<script type="text/javascript" th:src="@{/js/jquery.min.js}" src="../static/js/jquery.min.js"></script>
<script type="text/javascript" th:inline="javascript">
	/*<![CDATA[*/
	var user = [[${session.user}]]
	var addrLength = [[${address.size()}]]
	function editAddr(id) {
		$.ajax({
			url: 'addr/get/'+id,
			type: 'get',
			dataType: 'json',
			success: function (res) {
				if(res.code == 200){
					$('input[name="id"]').val(res.data.id);
					$('input[name="name"]').val(res.data.name);
					$('input[name="province"]').val(res.data.province);
					$('input[name="city"]').val(res.data.city);
					$('[name="address"]').val(res.data.address);
					$('input[name="phone"]').val(res.data.phone);
				}
			}
		})
	}
	/*]]>*/
</script>

<script type="text/javascript">
	$(function(){
		$('#addr-btn').click(function(){
			if(addrLength >= 5){
				alert('最多只能添加5个收货地址')
				return
			}

			let $id = $('input[name="id"]')
			let $name = $('input[name="name"]')
			let $province = $('input[name="province"]')
			let $city = $('input[name="city"]')
			let $address = $('[name="address"]')
			let $phone = $('input[name="phone"]')

			if($name.val() == ''){
				alert('请输入收件人姓名')
				$name.focus()
				return
			}else if($province.val() == ''){
				alert('请输入省份')
				$province.focus()
				return
			} else if($city.val() == ''){
				alert('请输入城市')
				$city.focus()
				return
			} else if($address.val() == ''){
				alert('请输入详细地址')
				$address.focus()
				return
			} else if($phone.val() == ''){
				alert('请输入电话号码')
				$phone.focus()
				return
			} else if(!/^1[34578]\d{9}$/.test($phone.val())){
				alert('请输入正确的手机号码')
				$phone.focus()
				return
			}

			let obj = {
				id: $id.val(),
				userId: user.id,
				name: $name.val(),
				province: $province.val(),
				city: $city.val(),
				address: $address.val(),
				phone: $phone.val()
			}

			let apiPath = $id.val() == '' ? 'addr/save' : 'addr/update'

			$.ajax({
				url: apiPath,
				type: 'post',
				data: JSON.stringify(obj),
				contentType: 'application/json',
				success: function (res) {
					if(res.code == 200){
						alert('保存成功')
						window.location.href = 'addr'
					}
				}
			})
		})
	})
</script>
</body>
</html>